<template>
  <div class="q-pa-md q-gutter-sm">
    <t-button label="顶部" icon="keyboard_arrow_up" color="primary" @click="open('top')" />
    <t-button label="右侧" icon="keyboard_arrow_right" color="primary" @click="open('right')" />
    <t-button label="底部" icon="keyboard_arrow_down" color="primary" @click="open('bottom')" />
    <t-button label="左侧" icon="keyboard_arrow_left" color="primary" @click="open('left')" />

    <t-dialog v-model:show="dialog" :position="position">
      <t-card style="width: 350px">
        <t-card-section class="row items-center no-wrap ">
        <h6>我在这儿</h6>
        </t-card-section>
      </t-card>
    </t-dialog>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const dialog = ref(false)
    const position = ref('top')

    return {
      dialog,
      position,

      open (pos) {
        position.value = pos
        dialog.value = true
      }
    }
  }
}
</script>
